import React, { Component } from 'react';
import "../../../cartFont.css"
import "./MyCart.scss"
import { withRouter } from "react-router-dom"
class MyCart extends Component {
    state = {
        data: [
            {
                shop_id: 1,
                shop_name: "阿玛尼旗舰店",
                shop_checked: true,
                children: [
                    {
                        p_id: 1,
                        p_name: "Armani/阿玛尼红黑管挚爱哑光唇膏口红正红番茄色400/405",
                        p_img: "https://img.alicdn.com/imgextra/i1/3527212490/O1CN018I6eEi1UGSrpZZvWO_!!0-item_pic.jpg_60x60q90.jpg",
                        p_price: 350,
                        p_checked: true,
                        p_count: 1
                    },
                    {
                        p_id: 2,
                        p_name: "Armani阿玛尼权力粉底液持久不脱妆油皮遮瑕控油",
                        p_img: "https://img.alicdn.com/imgextra/i1/3527212490/O1CN01M099k71UGSrZQEClj_!!0-item_pic.jpg_60x60q90.jpg",
                        p_price: 600,
                        p_checked: true,
                        p_count: 1
                    }
                ]
            },
            {
                shop_id: 2,
                shop_name: "SK-II旗舰店",
                shop_checked: true,
                children: [
                    {
                        p_id: 5,
                        p_name: "SK-II/ skii/SK2 护肤精华露补水保湿紧致青春露神仙水",
                        p_img: "https://img.alicdn.com/imgextra/i2/2549841410/O1CN019RwkaZ1MHp7FKnpyc_!!2549841410-0-sm.jpg_60x60q90.jpg",
                        p_price: 1860,
                        p_checked: true,
                        p_count: 1
                    },
                    {
                        p_id: 4,
                        p_name: "SK-II面部护肤套装神仙水小灯泡大红瓶补水滋养细腻修护skllsk2",
                        p_img: "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/917264765/O1CN01y5sYK71l4PuqiVcyn_!!917264765.jpg_60x60q90.jpg",
                        p_price: 3470,
                        p_checked: true,
                        p_count: 1
                    }
                ]
            }
        ],
        allSelect: true,  // 全选/取消全选   
        ispay: true,  // 值为true时，可以下单，否则不能下单
        iscartBg: true,   // 是否给购物车加背景
        final: [],  // 最后的数据
    }
    // 跳转到商品详情页
    handleGoToDetail = (params) => {
        this.props.history.push('/goodsdetails');
    }
    // 跳转到订单详情页
    handleGoToOrderDetail = (params) => {
        if (this.state.ispay) {
            this.props.history.push('/orderdetail');
        }
    }
    // 加
    handleAdd = (i, index) => {
        const datas = [...this.state.data]
        datas[i].children[index].p_count++;
        datas.map(item => {
            if (item.shop_checked) {
                this.state.final.push(item)
                this.state.final = Array.from(new Set(this.state.final))
            }
        })
        this.state.final.map((final, j) => {
            if (!final.shop_checked) {
                this.state.final.splice(j, 1)
            }
        })
        localStorage.setItem("product",JSON.stringify(this.state.final));
        this.setState({
            data: datas
        })
    }
    // 减
    handleSub = (i, index) => {
        const datas = [...this.state.data]
        if (datas[i].children[index].p_count >= 2) {
            datas[i].children[index].p_count--;
        }
        datas.map(item => {
            if (item.shop_checked) {
                this.state.final.push(item)
                this.state.final = Array.from(new Set(this.state.final))
            }
        })
        this.state.final.map((final, j) => {
            if (!final.shop_checked) {
                this.state.final.splice(j, 1)
            }
        })
        localStorage.setItem("product",JSON.stringify(this.state.final));
        this.setState({
            data: datas,
            isSub: this.state.isSub
        })
    }
    // 删除
    handleDetete = (i, index) => {
        let datas = [...this.state.data];
        delete datas[i].children[index];
        let del = datas[i].children.every(item => (!item.p_id))
        if (del) {
            datas.splice(i, 1);
        }
        if (datas.length === 0) {
            this.state.allSelect = false;
            this.state.ispay = false;
            this.state.iscartBg = false;
        }
        datas[i].children.splice(index,1)
        datas.map(item => {
            if (item.shop_checked) {
                this.state.final.push(item)
                this.state.final = Array.from(new Set(this.state.final))
            }
        })
        this.state.final.map((final, j) => {
            if (!final.shop_checked) {
                this.state.final.splice(j, 1)
            }
        })
        localStorage.setItem("product",JSON.stringify(this.state.final));
        this.setState({
            data: datas,
            allSelect: this.state.allSelect,
            ispay: this.state.ispay,
            iscartBg: this.state.iscartBg
        })
    }
    // 店铺全选/取消全选
    handleShopSelect = (item) => {
        let datas = [...this.state.data];
        let allSelect = this.state.allSelect;
        datas[item].shop_checked = !datas[item].shop_checked;
        datas[item].children.map(i => {
            i.p_checked = datas[item].shop_checked;
        })
        allSelect = datas.every(val => val.shop_checked === true);
        datas.map(i => {
            if (i.shop_checked) {
                this.state.final.push(i)
                this.state.final = Array.from(new Set(this.state.final))
            }
        })
        this.state.final.map((final, j) => {
            if (!final.shop_checked) {
                this.state.final.splice(j, 1)
            }
        })
        localStorage.setItem("product",JSON.stringify(this.state.final));
        this.setState({
            data: datas,
            allSelect,
            final: this.state.final
        })
    }
    // 购物车列表全选/取消全选
    handelAllSelect = (params) => {
        let datas = [...this.state.data];
        let allSelect = this.state.allSelect;
        let ispay = this.state.ispay;
        allSelect = !allSelect;
        ispay = allSelect;
        datas.map(item => {
            item.shop_checked = allSelect;
            if (item.shop_checked) {
                this.state.final.push(item)
                this.state.final = Array.from(new Set(this.state.final))
            }
            item.children.map((i) => {
                i.p_checked = allSelect;
            })
        })
        this.state.final.map((final, j) => {
            if (!final.shop_checked) {
                this.state.final.splice(j, 1)
            }
        })
        localStorage.setItem("product",JSON.stringify(this.state.final));
        this.setState({
            data: datas,
            allSelect: allSelect,
            final: this.state.final,
            ispay
        })
    }
    // 选择/取消选择
    handleSelect = (i, index) => {
        let datas = [...this.state.data];
        let allSelect = this.state.allSelect;
        datas[i].children[index].p_checked = !datas[i].children[index].p_checked;
        // every() 只要有一个不符合条件就为 false (一假即假)
        datas[i].shop_checked = datas[i].children.every(val => val.p_checked === true);
        allSelect = datas.every(val => val.shop_checked === true);
        this.setState({
            data: datas,
            allSelect
        })
    }
    // 计算总价格
    getTotalPrice = (params) => {
        let totalPrice = 0;
        this.state.data.map(item => {
            item.children.map(p => {
                if (p.p_checked) {
                    totalPrice += p.p_count * p.p_price;
                }
            })
        })
        return totalPrice.toFixed(2)
    }
    render() {
        return (
            <div className="cart">
                <div className="cartTitle">
                    <h2>购物车</h2>
                </div>
                <div className={this.state.iscartBg ? "cartList" : "cartBg"}>
                    {
                        this.state.data.map((item, i) => {
                            return (
                                <div className="cartItem" key={item.shop_id}>
                                    <div className="partAllSelect">
                                        <i onClick={this.handleShopSelect.bind(this, i)} className={"iconfont " + (item.shop_checked ? "icon-selected" : "icon-un-select")}></i>
                                        <p className="shopName">{item.shop_name}</p>
                                    </div>
                                    {
                                        item.children && item.children.map((pro, index) => {
                                            return (
                                                <div className="productItem" key={pro.p_id}>
                                                    <i onClick={this.handleSelect.bind(this, i, index)} className={"iconfont " + (pro.p_checked ? "icon-selected" : "icon-un-select")}></i>
                                                    <div className="productBox">
                                                        <div className="productImg" onClick={this.handleGoToDetail}>
                                                            <img src={pro.p_img} alt="" />
                                                        </div>
                                                        <div className="productMsg">
                                                            <p className="productName">{pro.p_name}</p>
                                                            <span className="productPrice">{"￥" + pro.p_price.toFixed(2)}</span>
                                                            <button onClick={this.handleDetete.bind(this, i, index)} className="delete">删除</button>
                                                            <div className="productCountAction">
                                                                <button onClick={this.handleSub.bind(this, i, index)} className="sub">-</button>
                                                                <span className="count">{pro.p_count}</span>
                                                                <button onClick={this.handleAdd.bind(this, i, index)} className="add">+</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            )
                        })
                    }
                </div>
                <div className="func">
                    <div className="allSeleck">
                        <i onClick={this.handelAllSelect} className={"iconfont " + (this.state.allSelect ? "icon-selected" : "icon-un-select")}></i>
                        <span>全选</span>
                    </div>
                    <div className="total">{"￥" + this.getTotalPrice()}</div>
                    <div className={(this.state.ispay ? "pay" : "unpay")} onClick={this.handleGoToOrderDetail}>下单</div>
                </div>
            </div>
        );
    }
}

export default withRouter(MyCart);

